<template>
  <div>
    <Container>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiper" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="popular_container">
        <div class="popular_title">{{ detailsData.name }}</div>
        <div class="popular_price">
          <div class="popular_left">
            <span class="price_min">低价：￥{{ detailsData.minPrice }}</span>
            <span class="price_max"
              >原价：￥{{ detailsData.originalPrice }}</span
            >
          </div>
          <div class="popuplar_right">库存：{{ detailsData.minScore }}</div>
        </div>
      </div>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickRouter"/>
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="danger" text="立即购买" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="onShow"
        />
      </van-goods-action>

      <van-popup
        v-model="isShow"
        position="bottom"
        :style="{ height: '40%' }"
        closeable
      >
        <div class="popup_container">
          <div class="popular_popup_top">
            <div class="popup_img">
              <img :src="detailsData.pic" />
            </div>
            <div class="popup_right">
              <div class="popup_title">{{ detailsData.name }}</div>
              <div class="popup_price">￥{{ detailsData.minPrice }}</div>
            </div>
          </div>
          <div class="popup_count">
            <span>购买数量:</span>
            <van-stepper :v-model="num"/>
          </div>
          <div class="popup_button">
            <van-button type="warning" @click="onClickGoCart(detailsData)"
              >加入购物车</van-button
            >
          </div>
        </div>
      </van-popup>
    </Container>
  </div>
</template>
<script>
import Container from "../../../components/container/Container"; //引入容器组件
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Popup,
  Stepper,
  Button,
} from "vant";
import mutationTypes from "../../../store/config.js";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Popup);
Vue.use(Stepper);
Vue.use(Button);
export default {
  components: {
    Container, //引入容器组件
  },
  data() {
    return {
      detailsData: [], //详情数据
      swiper: [], //轮播图数据
      isShow: false, //默认隐藏
      num: 1, //商品数量
    };
  },
  mounted() {
    //   console.log(this.$route.query.params);
    let id = this.$route.query.params;
    this.$APIShow
      .goodsDetails(id)
      .then((res) => {
        // console.log(res.data.data);
        //   console.log(res.data.data.pics2);
        this.detailsData = res.data.data.basicInfo;
        this.swiper = res.data.data.pics2;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    onShow() {
      //点击加入购物车弹出层显示
      this.isShow = !this.isShow;
    },
    onClickGoCart(item) {
      var Token = localStorage.getItem("token");
      console.log(Token);
      //点击加入购物车
      this.isShow = false;
      var obj = {
        item,
        num: this.num,
      };
      if(Token){
        this.$store.commit(mutationTypes.ONADDGOODS, obj);
      }else{
        this.$router.pushRouteByQuery("/login");
      }
      
    },
    onClickRouter(){//点击跳转购物车页面
      this.$router.pushRouteByQuery("/cart");
    }
  },
  
};
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 16rem;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.popular_container {
  width: 90%;
  margin-left: 5%;
  .popular_title {
    width: 100%;
    height: 1.5rem;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
  }
  .popular_price {
    width: 100%;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.65rem;
    .popular_left {
      width: 60%;
      height: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      // background: green;
      .price_min {
        color: red;
      }
      .price_max {
        color: gray;
      }
    }
    .popuplar_right {
      color: gray;
    }
  }
}
.popup_container {
  width: 100%;
  height: 100%;
  .popular_popup_top {
    width: 100%;
    height: 40%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid lightgray;
    .popup_img {
      width: 30%;
      height: 100%;
      img {
        width: 90%;
        height: 90%;
      }
    }
    .popup_right {
      width: 68%;
      height: 100%;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      .popup_title {
        width: 100%;
        font-size: 0.65rem;
      }
      .popup_price {
        font-size: 0.65rem;
        color: red;
      }
    }
  }
  .popup_count {
    width: 90%;
    margin-left: 5%;
    height: 20%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 0.65rem;
    }
  }
  .popup_button {
    width: 100%;
    .van-button {
      width: 100%;
    }
  }
}
</style>